window.onload = function () {

    //获取ul控件
    var ulLeft= document.querySelector('.main .main_left ul');
    //获取ul的父控件
    var ulParent = document.querySelector('.main .main_left');
    //获取ul自身的高度
    var ulLeftHeight = ulLeft.offsetHeight;
    //获取ul的父控件的高度
    var ulParentHeight = ulParent.offsetHeight;

    //获取ul和ul父控件高度之前的差值，同时也是纵向移动的最大值
    var maxHeight = ulLeftHeight - ulParentHeight;
    console.log('maxHeight'+maxHeight);

    //设定纵向移动的最小值，为吸附效果提供条件
    var minHeight = 100;

    //记录开始移动的y初始值
    var startY = 0;
    //记录移动过程中y的值
    var moveY = 0;
    //记录每次移动后的y值距离
    var distanceY = 0;

    var endY = 0;

    //设定ul的三个鼠标事件
    ulLeft.addEventListener('touchstart',function (event) {
        startY = event.touches[0].clientY;
    })
    
    ulLeft.addEventListener('touchmove',function (event) {
        moveY = event.touches[0].clientY - startY;
        ulLeft.style.transition = 'all .5s';
        ulLeft.style.transform = 'translateY('+ (moveY + distanceY) +'px)';
    })

    ulLeft.addEventListener('touchend',function (event) {
        distanceY += moveY;
        console.log(distanceY);
        //通过判断当前移动的move的值是否超过最大值还是低于最小值来做吸附效果
        if(distanceY < (maxHeight*-1)) {
            distanceY = maxHeight*-1;
        }else if(distanceY > 0) {
            distanceY = 0;
        }
        ulLeft.style.transition = 'all .5s';
        ulLeft.style.transform = 'translateY('+ distanceY +'px)'

    })

    var liArr = document.querySelectorAll('.main .main_left ul li');
    //给其中的li添加自定义data-index属性
    for(var i=0;i<liArr.length;i++){
        liArr[i].dataset['index'] = i;
    }

    //给按钮添加自定义的点击事件
    myClick(ulLeft,function (e) {
        console.log(e);
        //分别获取到当前点击的是哪个dom节点
        console.log(e.target);
        //获取当前的dom节点的父节点
        console.log(e.target.parentNode);

        var currDom = e.target;
        var currDomParentNode = e.target.parentNode;

        for(var i=0;i<liArr.length;i++){
            console.log(liArr[i].childNodes);
            liArr[i].childNodes[1].className = '';
        }
        currDom.className = 'current';
        //同时取出每个li中添加的index
        var liIndex = currDomParentNode.dataset['index'];
        console.log(liIndex);
    });
}

